<template>
	<view>
		<view class="boxTop">
			<p :class="show === 1 ? 'boxTopType' : ''" @click="upShow(1)">视频({{ props.video.length }})</p>
			<p :class="show === 2 ? 'boxTopType' : ''" @click="upShow(2)">喜欢({{ props.dianzan.length }})</p>
			<p :class="show === 3 ? 'boxTopType' : ''" @click="upShow(3)">资料</p>
		</view>
		<!-- //我的视频 -->
		<view class="boxLookAll" :id="isBox === 1 ? 'boxLook' : 'boxLookno'">
			<view class="boxAllMyVideo" v-for="item in props.video">
				<video :src="item.src" @click="clickvideo"></video>
				<view class="heart">
					<u-icon name="heart" color="white" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- //我的喜欢 -->
		<view class="boxLookAll" :id="isBox === 2 ? 'boxLook' : 'boxLookno'">
			<view class="boxAllMyVideo" v-for="item in props.dianzan">
				<video :src="item.src" @click="click_my_like"></video>
				<view class="heart">
					<u-icon name="heart" color="white" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- 我的资料 -->
		<view class="boxLookAll" :id="isBox === 3 ? 'boxLook' : 'boxLookno'">
			<view class="myData">知识点防守打法水电费</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(2);
const isBox = ref(2);
const upShow = (value) => {
	show.value = value;
	isBox.value = value;
	console.log(isBox.value);
};
const props = defineProps({
	video: {
		type: Array
	},
	dianzan: {
		type: Array
	}
});

const clickvideo = () => {
	sessionStorage.setItem('my_video', JSON.stringify(props.video));
	uni.redirectTo({
		url: `/pages/Cover/my_video_Play/my_video_Play?type=my_video`
	});
};
const click_my_like = () => {
	sessionStorage.setItem('my_like', JSON.stringify(props.dianzan));
	uni.redirectTo({
		url: `/pages/Cover/my_video_Play/my_video_Play?type=my_like`
	});
};
</script>

<style lang="scss" scoped>
.boxLookAll {
	width: 100%;
	height: 575px;
	overflow: scroll;
	display: flex;
	flex-direction: row;
}

.boxTop {
	color: #7f7f7f;
	display: flex;
	justify-content: space-around;
	padding: 0.5rem;

	p {
		padding-bottom: 0.5rem;
	}
}

.boxTopType {
	color: white;
	border-bottom: 2px solid white;
}

.boxAllMyVideo {
	width: 47vw;
	margin: 0.35rem;
	position: relative;
	background-color: #010f24;
	border: 1px solid white;
	video {
		width: 100%;
	}
	margin-top: 0.5rem;
}

#boxLook {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: scroll;
}

#boxLookno {
	display: none;
}

.heart {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
}
</style>
